/*
 * Some of these (`table-layout`, `border-spacing`, and `padding`) are used
 * to suppress unwanted default behavior. We don't want the layout of the table 
 * to depend upon the contents of its cells, and we don't want space between the
 * table cells or padding inside them.
 */

.background {
    background: rgb(52, 166, 251);
    table-layout: fixed;
    border-spacing: 0;
}

.background td {
    padding: 0;
}

.lava {
    background: rgb(255, 100, 100);
}

.wall {
    background: white;
}

/*
 * The `actor` class gives the actors their absolute position. Their type name is used as an
 * extra class to give them a color.
 */

.actor {
    position: absolute;
}

.coin {
    background: rgb(241, 229, 89);
}

.player {
    background: rgb(64, 64, 64);
}

/*
 * By adding the level's current status as a class name to the wrapper, we
 * can style the player actor slightly differently when the game is won or lost.
 *
 * After touching lava, the player’s color turns dark red, suggesting scorching. 
 * When the last coin has been collected, we add two blurred white shadows
 * —one to the top left and one to the top right—to create a white halo effect.
 */

.lost .player {
    background: rgb(160, 64, 64);
}

.won .player {
    box-shadow: -4px -7px 8px white, 4px -7px 8px white;
}

/*
 * The following CSS gives the game’s wrapping DOM element a maximum size 
 * and ensures that anything that sticks out of the element’s box is not 
 * visible. 
 * 
 * We also give it a relative position so that the actors inside it are 
 * positioned relative to the level’s top-left corner.
 */

.game {
    overflow: hidden;
    max-width: 600px;
    max-height: 450px;
    position: relative;
}